window.addEventListener('pageshow', function() {
    var nav_list = document.querySelector('.nav_list');
    // 导航栏内的每个小a
    let as = nav_list.children;;
    //console.log(nav_list);
    //console.log(as);
    /* 左侧边导航栏 */
    function nav_left() {
        var nav_left_in = document.querySelector('.nav_left_in');
        /* nav_left_in 里的a */
        /* var as = document.querySelectorAll('.nav_left_in a'); */

        /* 默认首页的背景颜色为 rgba(6,193,174,1) 字体为#fff*/
        //as[].style.color = 'rgba(50,133,255,1)';
        /* 点击模块，该模块变色 */
        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function() {
                /* x先用排他，清除其他颜色色块 */
                for (var i = 0; i < as.length; i++) {
                    as[i].style.backgroundColor = '#fff';
                    as[i].style.color = 'rgba(123,131,134,1)';
                }
                this.style.color = 'rgba(50,133,255,1)';
            })
        }
    }
    //nav_left(); // 动画完成后调用导航栏内的样式
    /* 清除侧边栏记录 */
    function nav_left_history() {
        /* nav_left_in 里的a */
        /* var as = document.querySelectorAll('.nav_left_in a'); */
        for (var i = 0; i < as.length; i++) {
            /* x先用排他，清除其他颜色色块 */
            for (var i = 0; i < as.length; i++) {
                as[i].style.backgroundColor = '#fff';
                as[i].style.color = 'rgba(123,131,134,1)';
            }
            /* 默认首页的背景颜色为 rgba(6,193,174,1) 字体为#fff*/
            as[0].style.color = '#fff';
        }
    }
    /* 点击导航按钮 左侧边栏浮现 */
    function nav_button() {
        var flag = false;
        // 左导航栏
        var nav_intheleft = document.querySelector('.nav_intheleft');
        // 导航栏内的每个小a
        /* var as = document.querySelectorAll('.nav_left_in a'); */
        // 导航按钮
        var nav_button = document.querySelector('.heard_top .menubar');
        // 点击按钮
        nav_button.addEventListener('click', function() {
            flag = false;
            nav_intheleft.style.display = 'block';
            animate(nav_intheleft, 0, 15); // 导航移出动画
            // 行内动画
            var i = 0;
            clearInterval(timer);
            var timer = setInterval(() => {
                if (i === 4) {
                    clearInterval(timer);
                    //console.log('清除啦');
                } else {
                    as[i].classList.add('show');
                    as[i].classList.remove('close');
                    i++;
                    //console.log(i);
                }
            }, 80);
            nav_left(); // 动画完成后调用导航栏内的样式
        })

        // 屏幕向左滑动 关闭左侧边栏
        var startX = 0;
        var moveX = 0;
        //点击的地方不在左侧边栏 startX > 
        document.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
        });
        document.addEventListener('touchmove', function(e) {
            // 移动距离
            moveX = e.targetTouches[0].pageX - startX;
            flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
            e.preventDefault(); // 阻止滚动屏幕的行为
        })
        document.addEventListener('touchend', function(e) {
            if (flag) {
                // (1) 如果移动距离大于80像素，导航栏收回
                if (Math.abs(moveX) > 80) {
                    // 如果是左滑 收回左侧边栏
                    if (moveX < 0) {
                        animate(nav_intheleft, -nav_intheleft.offsetWidth, 15, function() {
                            nav_intheleft.style.display = 'none';
                            //nav_left_history(); //清除侧边栏点击历史
                        }); // 导航移除动画
                        var i = 0;
                        clearInterval(timer2);
                        var timer2 = setInterval(() => {
                            if (i == 4) {
                                clearInterval(timer2);
                            } else {
                                as[i].classList.remove('show');
                                as[i].classList.add('close');
                                i++;
                                /* console.log(as[0].offsetLeft); */
                            }
                        }, 80);
                        /* nav_intheleft.style.display = 'none'; */
                    }
                }
            }
        })
    }
    nav_button();
})